﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>易淘商城--微信支付页</title>
    <link rel="icon" href="/assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>
<body>
    <div id="payVm">
        <div class="top">
            <shortcut />
        </div>
        <div class="cart py-container">
            <!--logoArea-->
            <div class="logoArea">
                <div class="fl logo"><span class="title">收银台</span></div>
            </div>
            <!--主内容-->
            <div class="checkout py-container  pay">
                <div class="checkout-tit">
                    <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
                    <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{totalPay}}</em>元</span>
                    <div class="clearfix"></div>
                </div>
                <div class="checkout-steps">
                    <div class="fl weixin">微信支付</div>
                    <div class="fl sao">
                        <p class="red">二维码有效时间为2小时，请及时支付</p>
                        <div class="fl code">
                            <div id="qrImage"></div>
                            <div class="saosao">
                                <p>请使用微信扫一扫</p>
                                <p>扫描二维码支付</p>
                            </div>
                        </div>
                        <div class="fl phone">

                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <p><a href="#" target="_blank">> 其他支付方式</a></p>
                </div>
            </div>

        </div>
    </div>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <script type="text/javascript">
        var payVm = new Vue({
            el: "#payVm",
            data: {
                yt,
                orderId: 0, //订单id
                totalPay: 0, //总金额
            },
            components: {
                shortcut: () => import("/js/pages/shortcut.js")
            },
            created() {
                this.loadData();
            },
            methods: {
                loadData() {
                    //1.判断用户是否登录
                    yt.verifyUser().then(resVerify => {
                        if (!resVerify.data.result) {
                            //4.未登录，跳转至登录页
                            console.log("登陆失效，请登陆后尝试");
                            location.href = "/login.html?returnUrl=" + location.href;
                            return;
                        }

                        //2.获取订单编号和总金额
                        this.orderId = yt.store.get("orderId");
                        this.totalPay = parseFloat(yt.store.get("totalPay")).toFixed(2);
                        //3.获取请求链接
                        yt.http.get("/pay/url/" + this.orderId).then(respUrl => {
                            if (!respUrl.data.result) {
                                //获取失败
                                alert(respUrl.data.message);
                                return;
                            }
                            //3.1 生成付款二维码
                            new QRCode(document.getElementById("qrImage"), {
                                text: respUrl.data.value,
                                width: 250,
                                height: 250,
                                colorDark: "#000000",
                                colorLight: "#ffffff",
                                correctLevel: QRCode.CorrectLevel.H
                            });
                            //3.2开启定时任务，查询付款状态
                            const taskId = setInterval(() => {
                                yt.http.get("/pay/state/" + this.orderId).then(respState => {
                                    if (!respState.data.result) {
                                        alert(respState.data.message);  //出异常了
                                        return;
                                    }
                                    let i = respState.data.value;
                                    if (i === 1) {
                                        //3.3 付款成功
                                        clearInterval(taskId);
                                        console.log(respState.data.message);
                                        //3.4 跳转到付款成功页
                                        location.href = "/paysuccess.html";
                                    } else if (i === 2) {
                                        //3.5付款失败
                                        clearInterval(taskId);
                                        //3.6跳转到付款失败页
                                        location.href = "/payfail.html"
                                    }
                                })
                            }, 3000);
                        });
                    }).catch(() => {
                        //4.未登录，跳转至登录页
                        location.href = "/login.html?returnUrl=" + location.href;
                    })
                }
            }
        });
    </script>
    <!-- 底部栏位 -->
    <!--页面底部，由js动态加载-->
    <div class="clearfix footer"></div>
    <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript">$(".footer").load("foot.html");</script>
    <!--页面底部END-->
    <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
    <script type="text/javascript" src="js/widget/nav.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul.payType li").click(function () {
                $(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
            })
        })
    </script>
</body>

</html>